import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';



class HeaderHideShowPage extends StatefulWidget {
  const HeaderHideShowPage({super.key});

  @override
  State<HeaderHideShowPage> createState() => _HeaderHideShowPageState();
}

class _HeaderHideShowPageState extends State<HeaderHideShowPage> {
  final ScrollController _scrollController = ScrollController();
  bool _showHeader = false;
  double _headerOffset = 0.0; // 用于动画效果的偏移量

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    print('_scrollController.position.pixels:: ${_scrollController.position.pixels},'
        '_scrollController.position.userScrollDirection :: ${_scrollController.position.userScrollDirection}');

    // 当用户滚动到顶部并继续下拉时显示header
    /*if (_scrollController.position.pixels == 0) {
      setState(() {
        _showHeader = true;
        _headerOffset = _scrollController.position.pixels.abs();
      });
    }
    // 当用户向上滚动时隐藏header
    else*/ if (_scrollController.position.userScrollDirection ==
        ScrollDirection.forward) {
      setState(() {
        _showHeader = true;
      });
    }
    // 当用户向下滚动时隐藏header
    else if (_scrollController.position.userScrollDirection ==
        ScrollDirection.reverse) {
      setState(() {
        _showHeader = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 主内容区域
          CustomScrollView(
            controller: _scrollController,
            physics: const BouncingScrollPhysics(
              parent: AlwaysScrollableScrollPhysics(),
            ),
            slivers: [
              // 这个SliverAppBar是占位的，实际不显示
              SliverAppBar(
                pinned: false,
                floating: false,
                expandedHeight: 0,
              ),
              // 实际内容
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (context, index) {
                    return ListTile(
                      title: Text('Item $index 1111'),
                    );
                  },
                  childCount: 50,
                ),
              ),
            ],
          ),
          // Header区域
          Positioned(
            top: _showHeader ? 0 : -kToolbarHeight - MediaQuery.of(context).padding.top,
            left: 0,
            right: 0,
            child: Container(
              color: Colors.blue,
              padding: EdgeInsets.only(
                top: MediaQuery.of(context).padding.top,
              ),
              child: SizedBox(
                height: kToolbarHeight,
                child: const Center(
                  child: Text(
                    'My Header',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}